<script setup lang="ts">
// import axios from 'axios';
import useTalkStore from '../store/useTalk'
// import { nanoid } from 'nanoid';
import { storeToRefs } from 'pinia';
let talkStore = useTalkStore();
// 只会将store中的数据转成ref对象，而方法不会
const {talkList}=storeToRefs(talkStore);
console.log(talkStore,'1111');
talkStore.$subscribe((mutate,state)=>{
    console.log(mutate);
    // $subscribe可以获取最新的state变化的值
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
})

 function addLove() {
   talkStore.getTalk();

}

</script>
<template>
    <div class="talk">
        <button @click="addLove">获取一句土味情话</button>
        <li v-for="talks in talkList" :key="talks.id">{{ talks.content }}</li>
    </div>
</template>
<style lang="css" scoped>
.talk {
    width: 80%;
    min-height: 200px;
    background-color: rgb(248, 194, 124);
    border-radius: 12px;
    padding: 20px;
}

li {
    list-style: none;
    margin: 15px 10px;
}
</style>